class LoadingComp extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback () {
    this.render();
    const that = $(this)
    setTimeout(() => {
      that.fadeOut(800);
    }, 500)
  }

  render () {
    this.shadowRoot.innerHTML = `
      <link rel="stylesheet" href="static/css/bootstrap.min.css" />
      <link rel="stylesheet" href="static/css/bootstrap-icons.css" />
      <link rel="stylesheet" href="static/css/font-awesome-pro.css" />
      <link rel="stylesheet" href="static/css/animate.css" />
      <link rel="stylesheet" href="static/css/glightbox.min.css" />
      <link rel="stylesheet" href="static/css/scrollCue.css" />
      <link rel="stylesheet" href="static/css/swiper-bundle.css" />
      <link rel="stylesheet" href="static/css/spacing.css" />
      <link rel="stylesheet" href="static/css/main.css" />
      <link rel="stylesheet" href="static/css/responsive.css" />
      <div class="preloader">
        <div class="loading-container">
          <div class="loading"></div>
          <div id="loading-icon">
            <img src="static/image/logo-3.png" alt="TechPro" />
          </div>
        </div>
    </div>
    
    `;
  }
}

customElements.define('custom-loading', LoadingComp);